<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>资源信息列表</title>
  <link rel="stylesheet" href="${ctx}/static/admin/layui/css/layui.css">
  <link rel="stylesheet" href="${ctx}/static/admin/css/common.css">
  <link rel="stylesheet" href="${ctx}/static/admin/css/switch.css">
  <style>
    html, body {
      height: 100%;
      margin:0;padding:0;
      font-size: 12px;
    }

    div{
      -moz-box-sizing: border-box;  /*Firefox3.5+*/
      -webkit-box-sizing: border-box; /*Safari3.2+*/
      -o-box-sizing: border-box; /*Opera9.6*/
      -ms-box-sizing: border-box; /*IE8*/
      box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
    }

    .dHead {
      height:65px;
      width:100%;
      position: fixed;
      z-index:5;
      top:0;
      overflow-x: auto;
      padding: 10px 15px;
    }

    .dBody {
      width:100%;
      overflow:auto;
      top: 40px;
      padding:10px 15px;
      position:absolute;
      z-index:10;
    }
  </style>
  </head>
  <body>
  <div style="height: 100%">
  <div class="dHead">
    <#button permission="" iconCls="layui-btn" size="layui-btn-sm" textName="添加" id="add"/>
  </div>
    <div class="dBody">
	  <table class="layui-hide" id="res_table" lay-filter="res_table"></table>
	</div>
  </div>
  </body>
</html>
<script src="${ctx}/static/admin/layui/layui.js"></script>
<script src="${ctx}/static/admin/js/common.js"></script>
<script type="text/html" id="enabled">
  <input type="checkbox" name="status" lay-filter="status" value="{{d.status}}" lay-skin="switch" lay-text="启用|禁用" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="toolbar">
  <#button permission="" iconCls="layui-btn" size="layui-btn-xs" textName="添加" event="add"/>
  <#button permission="" iconCls="layui-warm" size="layui-btn-xs" textName="编辑" event="edit"/>
</script>
<script type="text/javascript">
layui.use(['layer','jquery','form','treeGrid'], function(){
	var $ = jQuery = layui.$;
	var treeGrid = layui.treeGrid;
	var layer = layui.layer;
    var form = layui.form;
	
    treeGrid.render({
        id: 'res_table',
        elem: '#res_table',
        idField: 'id',
        url: '${ctx}/sys_admin/sys/res/getTreeGridView',
        height:'full-70',
        size:'sm',
        even:true,
        cellMinWidth: 100,
        isFilter:false,
        treeId: 'id',//树形id字段名称
        treeUpId: 'pId',//树形父id字段名称
        treeShowName: 'name',//以树形式显示的字段
        iconOpen:false,//是否显示图标【默认显示】
        method:'post',
        cols: [[
            {type: 'numbers'},
            {field: 'id', title: 'ID', width:50,hide:true},
            {width: 120 ,title: '操作', align: 'center', toolbar: '#toolbar'},
            {field: 'name', width: 220, title: '资源名称'},
            {field: 'url', width: 200, title: '路径'},
            {field: 'iconcls', width: 80, title: '图标',templet: function(d){
                return "<i class='layui-icon "+d.iconcls+"'></i>";
            }},
            {field: 'type', width: 80, title: '类型',templet: function(d){
                return d.type == 1?'菜单':'按钮';
            }},
            {field: 'seq', width: 80, title: '排序'},
            {field: 'status', width: 100, title: '状态', templet: '#enabled'},
            {field: 'des', unresize: true, title: '描述'}
        ]],
        page:false,
        parseData:function (res) {//数据加载后回调
            return res;
        }
    });

    treeGrid.on('tool(res_table)',function (obj) {
    	var data = obj.data;
    	if(obj.event === 'edit'){
    		parent.layer.open({
	  		  	type: 2,
	  		  	area: ['700px', '530px'],
	  		  	fixed: false, //不固定
	  		  	maxmin: true,
	  		  	content: '${ctx}/sys_admin/sys/res/form?id='+data.id,
		  		btn: ['保存', '关闭'],
	  	  		yes: function(index, layero){
		  	  		var iframeWin = layero.find('iframe')[0];//得到iframe页的窗口对象，执行iframe页的方法：
	                iframeWin.contentWindow.treeGrid = treeGrid;
	                iframeWin.contentWindow.treeId = 'res_table';
			  		layero.find('iframe').contents().find('#submit-btn').click();
			  	},
			  	btn2: function(index, layero){
		  			var index = layer.getFrameIndex(window.name);
					layer.close(index); //再执行关闭   
			  	}
	  		});
        }else if(obj.event==="add"){//添加行
        	parent.layer.open({
  	  		  	type: 2,
  	  		  	area: ['700px', '530px'],
  	  		  	fixed: false, //不固定
  	  		  	maxmin: true,
  	  		  	content: '${ctx}/sys_admin/sys/res/form?id='+data.id+'&isadd=true',
  	  		  	btn: ['保存', '关闭'],
	  	  		yes: function(index, layero){
	  	  			var iframeWin = layero.find('iframe')[0];//得到iframe页的窗口对象，执行iframe页的方法：
		  	  		iframeWin.contentWindow.treeGrid = treeGrid;
	                iframeWin.contentWindow.treeId = 'res_table';
			  		layero.find('iframe').contents().find('#submit-btn').click();
			  	},
			  	btn2: function(index, layero){
		  			var index = layer.getFrameIndex(window.name);
					layer.close(index); //再执行关闭   
			  	}
  	  		});
        }
    });
    
    form.on('switch(status)', function(data){
		var selectIfKey = data.othis;
		var parentTr = selectIfKey.parents("tr");
		var parentTrIndex = parentTr.attr("data-index");
		var id = parentTr.find(('td:eq(1)')).text().trim();
		var visible = 0;
		if(data.elem.checked){visible = 1;}
		$.post('${ctx}/sys_admin/sys/res/visible', {id: id, visible: visible}, function() {}, 'json');
	});
    
    $("#add").on('click', function() {
    	parent.layer.open({
			type: 2,
			area: ['700px', '530px'],
			fixed: false, //不固定
			maxmin: true,
			content: '${ctx}/sys_admin/sys/res/form?isadd=true',
	  		btn: ['保存', '重置', '关闭'],
		  	yes: function(index, layero){
		  		var iframeWin = layero.find('iframe')[0];//得到iframe页的窗口对象，执行iframe页的方法：
		  		iframeWin.contentWindow.treeGrid = treeGrid;
                iframeWin.contentWindow.treeId = 'res_table';
		  		layero.find('iframe').contents().find('#submit-btn').click();
		  	},
		  	btn2: function(index, layero){
		  		layero.find('iframe').contents().find('#reset-btn').click();
		  		return false;
		  	},
		  	btn3: function(index, layero){
	  			var index = layer.getFrameIndex(window.name);
				layer.close(index); //再执行关闭   
		  	}
		});
	});
});
</script>